<template>
  <div>
    <nav-bar title="任务整改"></nav-bar>
    <div class="realTimeInspection maxinBox" v-if="form">
      <van-row class="imagesTop">
        <van-col :span="8" v-for="(item, index) in form.troubleAttachmentList" :key="index">
          <div>
            <img :src="item" @click="bigAvatar(item)">
          </div>
        </van-col>
      </van-row>
      <div>
        <van-cell title="问题类型" :value="form.categoryName || '--'" />
        <van-cell title="故障点位" :value="form.pointDesc || '--'" />
        <van-cell title="截止日期" :value="form.expireDate | formatDate('YYYY-MM-DD HH:mm')" />
        <van-field
          class="textarea"
          type="textarea"
          v-model="form.troubleDesc"
          name="问题描述"
          label="问题描述"
          disabled
        />
        <van-cell class="marginTop5" title="危险等级" v-if="form.riskLevel" :value="form.riskLevel | riskLevel" />
        <van-cell title="发起人" :value="form.userName || '--'" />
        <van-cell title="发起时间" :value="form.createTime | formatDate('YYYY-MM-DD HH:mm')" />
        <van-cell v-if="realTimeDetails && realTimeDetails.status !== 0" title="详情" is-link to="RealTaskDetails" />
        <van-field
          v-if="realTimeDetails && realTimeDetails.itemData && realTimeDetails.itemData.completed"
          class="textarea marginTop5"
          type="textarea"
          v-model="form.reformDesc"
          name="整改描述"
          label="整改描述"
          disabled
        />
        <van-cell v-if="realTimeDetails && realTimeDetails.selectType !== 0" title="整改人" :value="form.handlers | personal" />
        <van-cell v-if="realTimeDetails && realTimeDetails.selectType !== 0" title="抄送人" :value="form.notifiers | personal" />
        <van-row class="backgroundfff" v-if="realTimeDetails && realTimeDetails.itemData && realTimeDetails.itemData.completed">
          <van-col :span="8" v-for="(item, index) in form.reformAttachmentList" :key="index">
            <div style="padding: 1.25rem 0.625rem">
              <img :src="item" @click="bigAvatar(item)">
            </div>
          </van-col>
        </van-row>
        <div class="marginTop5 center" style="padding: 0.3125rem 1.25rem;" v-if="realTimeDetails && realTimeDetails.selectType === 3">
          <van-button type="primary" native-type="onSubmit" @click="onRevocation" v-if="realTimeDetails && realTimeDetails.itemData && realTimeDetails.itemData.reformStatus !== 3">
            撤销
          </van-button>
          <van-button type="info" native-type="onSubmit" @click="editData" v-if="realTimeDetails && realTimeDetails.itemData && realTimeDetails.itemData.reformStatus !== 3">
            编辑
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {ImagePreview} from 'vant'
  import realTimeInspectionAPI from '../../../../api/workAPI/realTimeInspectionAPI.js'
  export default {
    data() {
      return {
        realTimeDetails: null,
        form: {
          userName: '',
          riskLevel: '',
          pointDesc: '',
          category: '',
          expireDate: '',
          createTime: '',
          troubleDesc: '',
          troubleAttachmentList: [],
          reformAttachmentList: [],
          handlers: [],
          notifiers: [],
          reformDesc: ''
        },
        uploader: []
      }
    },
    filters:{
      personal(val) {
        return val.map(item => {
          return `${item.userName} (${item.userMobile})`
        }).join(',') || '--'
      }
    },
    methods: {
      editData() {
        this.$router.push({
          name: 'InitiateRealTime',
          params: {
            id: this.realTimeDetails.itemData.id
          }
        })
      },
      // 撤销
      onRevocation() {
        this.$dialog.confirm({
          message: '该任务尚未完成，撤销后将无法恢复',
        })
          .then(() => {
            realTimeInspectionAPI.onRevocation(this.realTimeDetails.itemData.id).then(res => {
              this.$toast('撤销成功')
              this.$router.push({
                name: 'RealTimeInspection'
              })
            })
          })
          .catch(() => {
            // on cancel
          });
      },
      // 放大图片
      bigAvatar(img) {
        ImagePreview({
           images: [img],
        })
      },
    },
    mounted() {
      this.realTimeDetails = JSON.parse(localStorage.getItem('realTimeDetails'))
      console.log(this.realTimeDetails)
      if (this.realTimeDetails.itemData.trouble) {
        this.form = JSON.parse(JSON.stringify(this.realTimeDetails.itemData.trouble))
        this.form.expireDate = this.realTimeDetails.itemData.expireDate
        this.form.riskLevel = this.realTimeDetails.itemData.riskLevel
        this.form.pointDesc = this.realTimeDetails.itemData.pointDesc
        this.form.userName = this.realTimeDetails.itemData.userName
        this.form.handlers = this.realTimeDetails.itemData.trouble.handlers
        this.form.notifiers = this.realTimeDetails.itemData.trouble.notifiers
      } else {
        this.form = this.realTimeDetails.itemData
      }
    }
  }
</script>

<style scoped lang="scss">
.textarea{
  color: #666;
}
</style>
